<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<body>
<div id="map"></div>
<script src="js/lib/ol4.6.4/ol.js"></script>
<script src="js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
    var view = new ol.View({
        zoom: 4,
        center:ol.proj.fromLonLat([110, 39])
    });

    var source = new ol.source.Vector({
        features: []
    });
    var vector = new ol.layer.Vector({
        source: source,
        style: styleFunction
    });
    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map",
        layers: [
            getTdtLayer('vec_w'),
            getTdtLayer('cva_w'),
            vector
        ],
        view: view
    });
    var wkts = [
        "POLYGON((100.02715479879 32.168082192159,102.76873121104 37.194305614622,107.0334056301 34.909658604412,105.96723702534 30.949603786713,100.02715479879 32.168082192159))",

        "POLYGON((96.219409781775 32.777321394882,96.219409781775 40.240501628236,104.82491352023001 40.240501628236,104.82491352023001 32.777321394882,96.219409781775 32.777321394882))",

        "MULTIPOLYGON (((96.219409781775 32.777321394882, 96.219409781775 40.240501628236, 104.82491352023001 40.240501628236, 104.82491352023001 36.09277937755627, 102.76873121104 37.194305614622, 100.35946709118406 32.777321394882, 96.219409781775 32.777321394882)), ((100.35946709118406 32.777321394882, 104.82491352023001 32.777321394882, 104.82491352023001 36.09277937755627, 107.0334056301 34.909658604412, 105.96723702534 30.949603786713, 100.02715479879 32.168082192159, 100.35946709118406 32.777321394882)))"
    ];
    var features = [];
    var wktformat = new ol.format.WKT();
    for(var i=0;i<wkts.length;i++){
        var feature = wktformat.readFeature(wkts[i]);
        feature.getGeometry().transform("EPSG:4326", "EPSG:3857");
        if(i===2) feature.set("index", i);
        features.push(feature);
    }
    source.addFeatures(features);

    function getTdtLayer(lyr){
        // var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
        var urls = [];
        for(var i=0;i<8;i++){
            urls.push("http://t"+i+".tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}");
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }

    function styleFunction(feat) {
        var index = feat.get("index");
        var _color = "rgba(255, 0, 0, 0)",
            _stroke = 3;
        if(index===2) _color = "rgba(255, 0, 0, .5)";
        var stroke = new ol.style.Stroke({
            color: '#0228c7',
            width: _stroke
        });
        var fill = new ol.style.Fill({
            color: _color
        });
        return new ol.style.Style({
            stroke:stroke,
            fill: fill,
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: "red"
                }),
                stroke:stroke
            })
        });
    }
</script>
</body>
</html>